<template>
  <div>
    <el-row style="background-color: #dadada" type="flex" align="middle">
      <el-col :span="1">
        <el-button native-type="button" icon="el-icon-arrow-left" style="border-width: 0px;background-color: #dadada" @click="backClick">返回</el-button>
      </el-col>
      <el-col :span="5" :offset="8">
        <label >{{title}}</label>
      </el-col>
    </el-row>
    <br>
    <el-row type="flex" justify="center">
      <el-col :span="13">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item
            label="礼品名称"
            prop="name"
            :rules="[
            { required: true, message: '请输入礼品名称', trigger: 'blur' }
          ]"
          >
            <el-input placeholder="输入礼包名称" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="礼品logo">
            <image-upload ref="uploadLogo" :fileList="logoFiles" :urlList="logoUrls" :multiple="false" :limitCount="1"></image-upload>
          </el-form-item>
          <el-form-item
            label="赞助时间"
            prop="daterange"
            :rules="[
            { required: true, message: '请输入赞助时间区间', trigger: 'blur' }
          ]"
          >
              <el-date-picker
                value-format="yyyy-MM-dd"
                type="daterange"
                placeholder="赞助开始日期"
                v-model="form.daterange"
                range-separator="至"
                start-placeholder="赞助开始日期"
                end-placeholder="赞助结束日期"
                style="width: 100%;">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="奖品外链">
            <el-input v-model="form.giftUrl"></el-input>
          </el-form-item>
          <el-form-item label="礼包库存">
            <el-tooltip content="-99表示无限库存" placement="bottom" effect="light">
              <el-input placeholder="-99表示无限库存" v-model="form.stock"></el-input>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="千分比概率">
            <el-input v-model="form.probability"></el-input>
          </el-form-item>
          <el-form-item label="礼品状态">
            <el-radio-group v-model="form.status">
              <el-radio :label="1">上架</el-radio>
              <el-radio :label="0">下架</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="类型">
            <el-radio-group v-model="form.type">
              <el-radio :label="1">红包</el-radio>
              <el-radio :label="2">1分购</el-radio>
              <el-radio :label="3">谢谢参与</el-radio>
              <el-radio :label="4">其他</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-button type="info" @click="cancel">取消</el-button>
            <el-button type="primary" @click="onSubmit">确定</el-button>
          </el-form-item>
        </el-form>
      </el-col>

    </el-row>


  </div>
</template>

<script>
  import ImageUpload from '../Common/ImageUpload'
  import bus from '../../Utils/bus'
  export default {
    name: 'AddPrize',
    data(){
      return{
        title:'新增奖品',
        prizeId:this.$route.query.prizeId,
        giftId:this.$route.query.giftId,

        loading: false,
        logoFiles:[],
        logoUrls:[],

        form: {
          "endTime": "",
          "giftId": 0,
          "giftUrl": "",
          "id": 0,
          "logo": "",
          "name": "",
          "probability": 0,
          "startTime": "",
          "status": 1,
          "stock": -99,
          "type": 1,
          "daterange":[]
        },
      }
    },
    components:{
      ImageUpload
    },
    mounted(){
      if (this.prizeId > 0){
        this.title = '编辑奖品'
        this.loadPrize()
      }
    },
    methods:{
      loadPrize(){
        this.getAxios('giftCouponPrize/load',{
          id:this.prizeId
        }).then(res => {
          let prize = res.data
          this.form = prize
          this.form.daterange = [prize.startTime, prize.endTime]
          if (!this.isEmpty(prize.logo)){
            let obj = new Object();
            obj.url = prize.logo;
            obj.name = 'logo'
            this.logoFiles.push(obj);
            this.logoUrls.push({
              url:prize.logo
            })
          }

        }).catch(error => {
          this.$message({
            type:'info',
            message:error.msg
          })
        })
      },
      cancel(){
        return this.$confirm("是否取消此次操作").then(() => {
          this.backClick()
        }).catch(() =>{

        })
      },
      onSubmit(){

        this.$refs.form.validate((valid) => {
          if (valid) {
            this.submit()
          } else {
            return false;
          }
        })
      },
      submit(){
        this.form.giftId = this.giftId
        var urls = new Array()
        for (let i = 0, len = this.logoUrls.length; i < len; i++) {
          let obj = this.logoUrls[i]
          urls.push(obj.url)
        }
        this.form.logo = urls.join(",")
        this.form.startTime = this.form.daterange[0]
        this.form.endTime = this.form.daterange[1]

        this.form.daterange = []
        if (this.prizeId > 0){ // 更新

          this.getAxios('giftCouponPrize/update',this.form).then(() => {
            this.$message({
              type:'success',
              message:'操作成功'
            })
            this.backClick()
          }).catch(error => {
            this.$message({
              type:'info',
              message:error.msg
            })
          })
        } else {
          if (this.giftId > 0){ // 指定榜单新增
            this.getAxios('giftCouponPrize/insert',this.form).then(() => {
              this.$message({
                type:'success',
                message:'操作成功'
              })
              this.backClick()
            }).catch(error => {
              this.$message({
                type:'info',
                message:error.msg
              })
            })
          } else { // 本地存储
            let listStr = sessionStorage.getItem('localAddPrize')
            var list = JSON.parse(listStr)
            if (this.isEmpty(list)){
              list = []
            }
            list.push(this.form)
            sessionStorage.setItem('localAddPrize', JSON.stringify(list))
          }
          this.backClick()
        }
      },
      backClick(){
        this.$router.back()
      }
    }
  }
</script>

<style scoped>
  /deep/.transfer .el-transfer-panel__item .el-checkbox__input{
    left: 15px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .tableCol{
  }
</style>

